<template>
  <div class="pwd-wrap">
    <my-tabs :tab-list="tabList">
      <template v-slot="{ row }">
        <li
          class="item pointer"
          :class="{ active: routePath === row.path }"
          @click="handleClickMenu(row)"
        >
          {{ row.title }}
        </li>
      </template>
    </my-tabs>
    <div class="pwd-form" v-if="accountInfo.need_set_password">
      <el-form label-width="80px" :model="passwordForm" :rules="passwordRules" ref="setPwdForm">
        <el-form-item label="新密码" prop="newPassword">
          <el-input
            type="password"
            v-model="passwordForm.newPassword"
            placeholder="密码长度为6～20个字符"
          ></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="againPassword">
          <el-input
            type="password"
            v-model="passwordForm.againPassword"
            placeholder="再次输入新密码"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSetPwd('setPwdForm')">保存</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="pwd-form" v-else>
      <el-form label-width="80px" :model="passwordForm" :rules="passwordRules" ref="passwordForm">
        <el-form-item label="旧密码" prop="oldPassword">
          <el-input
            type="password"
            v-model="passwordForm.oldPassword"
            placeholder="请输入旧密码"
          ></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
          <el-input
            type="password"
            v-model="passwordForm.newPassword"
            placeholder="密码长度为6～20个字符"
          ></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="againPassword">
          <el-input
            type="password"
            v-model="passwordForm.againPassword"
            placeholder="再次输入新密码"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handlePasswordForm('passwordForm')">保存</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import MyTabs from '../components/myTab.vue'
import md5 from 'spark-md5'
import { mapState } from 'vuex'
export default {
  components: {
    MyTabs
  },
  inject: ['reload'],
  computed: {
    ...mapState({
      accountInfo: state => state.my.account_info,
      userInfo: state => state.user.info
    }),
    routePath() {
      return this.$route.path
    }
  },
  data() {
    // 密码的验证
    var newPassword = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (!this.$util.password(value)) {
          callback(new Error('密码格式不正确'))
        } else {
          callback()
        }
      }
    }
    // 确认密码验证
    var againPassword = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.passwordForm.newPassword) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      tabList: [
        {
          path: '/my/profile/my_account',
          title: `${
            this.$store.state.my.account_info.need_set_password == 1 ? '设置密码' : '修改密码'
          }`
        },
        {
          path: '/my/profile/payPwd',
          title: '支付密码'
        },
        {
          path: '/my/profile/thirdlogin',
          title: '第三方绑定'
        }
      ],
      passwordForm: {
        oldPassword: '',
        newPassword: '',
        againPassword: ''
      },
      passwordRules: {
        oldPassword: [{ required: true, message: '请输入旧密码', trigger: 'blur' }],
        newPassword: [{ validator: newPassword, required: true, trigger: 'blur' }],
        againPassword: [{ validator: againPassword, required: true, trigger: 'blur' }]
      }
    }
  },
  methods: {
    // 提交
    handlePasswordForm(formName) {
      var that = this
      that.$refs[formName].validate(valid => {
        if (valid) {
          this.$api.updateAccountPwdEdit(
            {
              ex_password: md5.hash(that.passwordForm.oldPassword),
              new_password: md5.hash(that.passwordForm.newPassword)
            },
            res => {
              that.$message.success(res.msg) // 登录成功提示
              that.$refs[formName].resetFields() // 登录成功重置表单
            },
            error => {
              that.$message.error(error.msg)
            }
          )
        }
      })
    },
    // 设置密码
    handleSetPwd(formName) {
      var that = this
      that.$refs[formName].validate(valid => {
        if (valid) {
          this.$api.updateAccountPwdSet(
            {
              password: md5.hash(that.passwordForm.newPassword)
            },
            res => {
              that.$message.success(res.msg) // 登录成功提示
              this.reload()
            },
            error => {
              that.$message.error(error.msg)
            }
          )
        }
      })
    },
    handleClickMenu(data) {
      this.$router.push({
        path: data.path
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.pwd-wrap {
  .pwd-form {
    width: 300px;
  }
}
</style>
